<template>
  <div class="blogs_box">
    <div class="row">
      <div :class="[isHidden ? 'col-md-12' : 'col-md-8']">
        <!-- 轮播图区域 -->
        <transition name="el-fade-in-linear">
          <div class="carousel_box">
            <el-carousel :interval="5000" arrow="always" height="350px">
              <el-carousel-item v-for="item in imageList" :key="item.id">
                <img :src="item.idView" class="image" alt=""/>
              </el-carousel-item>
            </el-carousel>
          </div>
        </transition>

        <div>
          <!-- 文章列表区域 -->
          <div class="card_list" v-for="list in pressing_all" :key="list.id">
            <el-card>
              <h5>
                <router-link class="card_title" :to="{ name: 'OrderDetail', params: { oid: list.id } }">
                  <span>{{ list.title }}</span>
                </router-link>
              </h5>
              <div class="card_detail">
                <div class="rol">
                  <i class="el-icon-position"></i>
                  <span>QQ</span>
                  <span>{{ list.qq }}</span>
                </div>
                <div class="rol">
                  <i class="el-icon-phone-outline"></i>
                  <span>电话</span>
                  <span>{{ list.phone }}</span>
                </div>
                <div class="rol">
                  <i class="el-icon-location-outline"></i>
                  <span>地址</span>
                  <span>{{ list.address }}</span>
                </div>
                <div class="rol">
                  <i class="el-icon-coin"></i>
                  <span>酬劳</span>
                  <span>¥ {{ list.price }}</span>
                </div>
                <div class="rol">
                  <i class="el-icon-time"></i>
                  <span>时间</span>
                  <span>{{ list.time }}</span>
                </div>
              </div>
              <div class="card_desc">
                <p>{{ list.content }}</p>
              </div>
              <div style="display: flex;justify-content: space-between;">
                <router-link :to="{ name: 'OrderClassify', params: { classify: list.classify } }">
                  <el-tag type="success" v-if="list.classify === 0">楼栋服务</el-tag>
                  <el-tag type="success" v-if="list.classify === 1">代拿代买</el-tag>
                  <el-tag type="success" v-if="list.classify === 2">其他互助</el-tag>
                </router-link>
                <el-popconfirm title="是否确认接单？" @onConfirm="toAcceptOrder(list.id, list.uid)">
                  <el-button type="primary" plain size="small" slot="reference">确认接单</el-button>
                </el-popconfirm>
              </div>
            </el-card>
          </div>
        </div>
      </div>

      <div :class="isHidden ? '' : 'col-md-4'">
        <!-- 详情介绍区域 -->
        <div class="detail_box">
          <div>
            <h3>~欢迎来到 校园互助平台~</h3>
            <div>
              <el-avatar :size="120">
                <img :src="this.avatar" alt=""/>
              </el-avatar>
            </div>

            <div><span style="color: #40485b">{{ this.nickname }}</span></div>
            <div class="maction">
              <span>
                <router-link to="/home" style="text-decoration: none">
                  <el-link type="info" :underline="false">主页</el-link>
                </router-link>
              </span>
              <el-divider direction="vertical"></el-divider>
              <span>
                <router-link to="/order/add" style="text-decoration: none">
                  <el-link type="success" :underline="false">发布新订单</el-link>
                </router-link>
              </span>
              <el-divider direction="vertical"></el-divider>
              <span>
                <a href="#" style="text-decoration: none" @click="back()">
                  <el-link type="danger" :underline="false">退出</el-link>
                </a>
              </span>
            </div>
          </div>
        </div>

        <!-- 分类标签区域 -->
        <div class="classify_box">
          <h5>标签墙</h5>
          <div class="tag_box">
            <router-link :to="{ name: 'OrderClassify', params: { classify: -1 } }">
              <el-tag effect="plain" :type="typeArr[Math.floor(Math.random() * typeArr.length)]" style="cursor: pointer;">
                <i class="el-icon-collection-tag"></i> 所有分类
              </el-tag>
            </router-link>
            <router-link :to="{ name: 'OrderClassify', params: { classify: 0 } }">
              <el-tag effect="plain" :type="typeArr[Math.floor(Math.random() * typeArr.length)]" style="cursor: pointer;">
                <i class="el-icon-collection-tag"></i> 楼栋服务
              </el-tag>
            </router-link>
            <br>
            <router-link :to="{ name: 'OrderClassify', params: { classify: 1 } }">
              <el-tag effect="plain" :type="typeArr[Math.floor(Math.random() * typeArr.length)]" style="cursor: pointer;">
                <i class="el-icon-collection-tag"></i> 代拿代买
              </el-tag>
            </router-link>
            <router-link :to="{ name: 'OrderClassify', params: { classify: 2 } }">
              <el-tag effect="plain" :type="typeArr[Math.floor(Math.random() * typeArr.length)]" style="cursor: pointer;">
                <i class="el-icon-collection-tag"></i> 其他互助
              </el-tag>
            </router-link>
          </div>
        </div>

        <!-- 日历 -->
        <div class="calendar_box">
          <h5>日历</h5>
          <el-calendar v-model="calendar"></el-calendar>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  data () {
    return {
      userid: 0,
      nickname: "",
      // 用户头像
      avatar: "",
      // 所有互助
      pressing_all: [],
      // 日历数据
      calendar: new Date(),
      // 轮播图内容
      imageList: [
        { id: 0, idView: require('../../assets/img/carousel/a1.jpg') },
        { id: 1, idView: require('../../assets/img/carousel/a2.jpg') },
        { id: 2, idView: require('../../assets/img/carousel/a3.jpg') },
        { id: 3, idView: require('../../assets/img/carousel/a4.jpg') }
      ],
      // 是否隐藏col
      isHidden: false,
      // 标签类型颜色
      typeArr: ['', 'success', 'info', 'danger', 'warning']
    }
  },
  methods: {
    // 获取文章列表
    async getArticleList () {
      const { data: res } = await this.$http.get('/help/nav/index')
      if (res.success !== undefined) {
        window.location.href = "http://malloc.press:9000/user/nav/toLogin"
      }
      this.pressing_all = res.pressing_all
    },
    // 确认订单
    toAcceptOrder (id, uid) {
      const that = this;
      if (uid == this.userid) {
        that.$message({
          message: '您不能接自己的订单！',
          type: 'warning'
        });
        return
      }
      that.$http.get('/help/nav/acceptOrder',{params:{uid: localStorage.getItem("userId"),oid: id}},{
        emulateJSON:true
      }).then(res => {
        if (res.data.success !== undefined) {
          window.location.href = "http://malloc.press:9000/user/nav/toLogin"
        }
        that.$message({
          message: '请在三天内联系发布者确认，若三天后发布者未确认视为未完成订单！',
          type: 'warning'
        });
        that.getArticleList();
      });
    },
    // 退出登陆
    async back () {
      window.localStorage.clear()
      await this.$http.get('/user/nav/toLogin')
    },
  },
  created () {
    const url = location.search;
    var that = this;
    if (url.indexOf("?") !== -1) {
      localStorage.setItem("userToken", url.substr(1).substr(10))
      that.$http.get('/user/status',{
        emulateJSON:true
      }).then(res => {
        that.$http.post('/help/nav/getInfo', {
          uid: res.data.data.userInfo.id,
          nickname: res.data.data.userInfo.nickname,
          name: res.data.data.userInfo.name,
          phone: res.data.data.userInfo.phone,
          qq: res.data.data.userInfo.qq,
          stuno: res.data.data.userInfo.stuno,
          pwd: res.data.data.userInfo.six,
          avatar: res.data.data.userInfo.avatar
        },{emulateJSON:true}).then(res => {
          // window.location.href = "http://malloc.press:10000/"
          window.location.href = "http://graduate.tccgh.cn/dist/"
        })
      });
    }
    this.userid = localStorage.getItem("userId")
    this.nickname = localStorage.getItem("nickname")
    this.avatar = localStorage.getItem("avatar")
    this.getArticleList()
    if (document.body.clientWidth < 1000) {
      this.isHidden = true
    }
  },
  mounted () {
    // 监听屏幕大小，宽度小于1000将隐藏右边的栏目
    window.onresize = () => {
      return (() => {
        this.isHidden = document.body.clientWidth < 1000
      })()
    }
  }
}
</script>

<style lang="less" scoped>
a:hover {
  text-decoration: none;
}

.blogs_box {
  //min-height: 1800px;
  opacity: 0.9 !important;
  .mpage {
    margin: 0 auto;
    text-align: center;
  }
}

.carousel_box {
  margin-bottom: 5%;
  box-sizing: border-box;
  // 边框样式
  border-radius: 3px;
  // padding: 5px;

  .image {
    border-radius: 20px;
    width: 100%;
    height: inherit;
    background-size: cover;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    border: 1px solid #eee;
    padding: 5px;
  }
}
.calendar_box {
  margin-top: 4%;
  border-radius: 3px;
  border: 1px solid #eee;
  // background-color: #fff;
  background: rgba(255, 255, 255, 0.3);
  h5 {
    font-size: 18px;
    color: #333;
    text-align: left;
    border-left: 5px solid #409eff;
    border-right: none;
    padding: 2% 5% 3%;
  }
  .el-calendar {
    background: rgba(255, 255, 255, 0.3) !important;
  }
}

.detail_box {
  margin-bottom: 4%;
  text-align: center;
  // background-color: #fff;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
  min-height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.classify_box {
  margin-top: 4%;
  padding-bottom: 4%;
  // min-height: 20%;
  border-radius: 3px;
  border: 1px solid #eee;
  // background-color: #fff;
  background: rgba(255, 255, 255, 0.3);

  h5 {
    font-size: 18px;
    color: #333;
    text-align: left;
    border-left: 5px solid #409eff;
    border-right: none;
    padding: 2% 5% 3%;
  }
  .tag_box {
    padding: 0% 5%;
    .el-tag {
      margin: 2%;
    }
  }
  .list_box {
    padding: 0% 8%;
    ul {
      padding: 0 !important;
      list-style: none;
      li {
        cursor: pointer;
        padding: 2% 2%;
        border-top: 1px solid #eee;
        transition: all 0.5s;
        border-radius: 2%;
        a {
          color: #333;
          text-decoration: none;
          transition: all 0.5s;
        }
        a:hover {
          color: rgb(117, 147, 238);
        }
        .router-link-active {
          text-decoration: none;
        }
      }
      li:hover {
        margin: 0 -2%;
        background: rgb(226, 250, 220);
        color: rgb(117, 147, 238);
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        span {
          color: rgb(248, 98, 236);
        }
      }
      .desk {
        margin-bottom: 3%;
        span {
          text-align: justify;
          color: #888;
          font-size: 13px;
          line-height: 20px;
        }
        .blogdesk {
          height: 100px;
          width: inherit;
          cursor: pointer;
          overflow: hidden;
          img {
            height: inherit;
            width: 100%;
            transition: all 0.9s;
          }
          img:hover {
            transform: scale(1.1);
          }
        }
      }
    }
    .title {
      // border-top: 1px solid #eee;
      // margin-top: 2%;
    }
    .date {
      margin-top: 2%;
      font-size: 13px;
      line-height: 18px;
      font-weight: 100;
      color: #888;
      display: flex;
      justify-content: space-between;

      .stat_list {
        font-size: 0.7rem;
        line-height: 20px;
        i {
          margin-left: 5px;
          margin-right: 2px;
        }
      }
    }
  }
}

@media only screen and (max-width: 1000px) {
  .calendar_box {
    width: 0;
    display: none;
  }
  .detail_box {
    width: 0;
    display: none;
  }
  .classify_box {
    width: 0;
    display: none;
  }
  .mpage {
    width: inherit;
    overflow: hidden;
  }
}

.el-avatar {
  border: 1px solid rgb(243, 219, 190);
  background-color: rgb(252, 251, 249);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 8px;
  position: relative;
  img {
    border-radius: 50%;
    width: 90%;
    height: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
}
.card_list {
  .el-card {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    // box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    min-height: 200px;
    margin: 0 !important;
    margin-bottom: 5% !important;

    .card_title {
      color: #606266;
      font-size: 1.6rem;
    }
    .card_title:hover {
      color: #007bff;
      text-decoration: none;
    }
    .card_detail {
      width: 100%;
      font-size: 12px;
      color: #999;
      padding: 10px 0;
      .rol {
        float: left;
        margin-right: 8px;
        i {
          margin-right: 4px;
        }
        span {
          margin-right: 5px;
        }
      }
    }
    .card_desc {
      width: 100%;
      color: #555;
      font-size: 16px;
      line-height: 2;
      padding-top: 2%;

      p {
        width: 85%;
        overflow: hidden;
        display: -webkit-box; //将元素设为盒子伸缩模型显示
        -webkit-box-orient: vertical; //伸缩方向设为垂直方向
        -webkit-line-clamp: 2; //超出3行隐藏，并显示省略号
      }
    }
  }
}
</style>

<style lang="less">
.el-calendar-day {
  height: 100% !important;
}
.row {
  margin: 0 !important;
  padding: 0 !important;
}
</style>
